import { parse } from '@/utils/historyUtils';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import React, { useEffect, useState } from 'react';
import { useAccess } from 'umi';
import AddNeeds from './AddNeeds';
import TableApprovalNeeds from './TableApprovalNeeds';
import TablePassNeeds from './TablePassNeeds';

interface TableNeedsProps {
  interviewSearchId?: string;
}

const TableNeeds: React.FC<TableNeedsProps> = ({ interviewSearchId }) => {
  const access = useAccess();

  const [width, setWidth] = useState(500);

  const [tab, setTab] = useState('release');

  // const [id, setIdState] = useState<string>();
  const [refresh, setRefreshState] = useState<string>('release');

  // useEffect(() => {
  //   const { id } = parse(location.search) as { id: string };
  //   setIdState(id);
  // }, []);

  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(size) => {
        setWidth(size.width);
      }}
    >
      <PageContainer
        header={{
          title: (
            <span
              style={{
                marginInlineEnd: '12px',
                color: 'rgba(0, 0, 0, 0.88)',
                fontWeight: 600,
                fontSize: 20,
                height: 48,
                paddingRight: 35,
              }}
              title="采访需求"
            >
              采访需求
            </span>
          ),
          breadcrumb: {
            items: [],
          },
          style: {
            paddingBlockEnd: 0,
          },
          extra: [
            (access.媒体采访x配置x管理员 || access.媒体采访x配置x发布者) && (
              <AddNeeds
                triggerMode="button"
                key="add_active"
                onRefurbish={() => {
                  setRefreshState('add');
                }}
              />
            ),
          ],
        }}
      >
        <ProCard
          tabs={{
            activeKey: tab,
            items: access.媒体采访x配置x接收者
              ? [
                  {
                    label: `已发布`,
                    key: 'release',
                    children: (
                      <TablePassNeeds refresh={refresh} onRefurbish={function (): void {}} />
                    ),
                  },
                ]
              : access.媒体采访x配置x发布者
              ? [
                  {
                    label: `已发布`,
                    key: 'release',
                    children: (
                      <TablePassNeeds
                        interviewSearchId={interviewSearchId}
                        refresh={refresh}
                        onRefurbish={function (): void {}}
                      />
                    ),
                  },
                  {
                    label: `待审批`,
                    key: 'approval',
                    children: (
                      <TableApprovalNeeds refresh={refresh} onRefurbish={function (): void {}} />
                    ),
                  },
                ]
              : [
                  {
                    label: `已发布`,
                    key: 'release',
                    children: (
                      <TablePassNeeds
                        interviewSearchId={interviewSearchId}
                        refresh={refresh}
                        onRefurbish={function (): void {}}
                      />
                    ),
                  },
                  {
                    label: `待审批`,
                    key: 'approval',
                    children: (
                      <TableApprovalNeeds refresh={refresh} onRefurbish={function (): void {}} />
                    ),
                  },
                ],
            onChange: (key) => {
              setTab(key);
              setRefreshState(key);
            },
          }}
          bodyStyle={{
            padding: 0,
          }}
        />
      </PageContainer>
    </RcResizeObserver>
  );
};
export default TableNeeds;
